import React from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import { ContentPackage, AdvancedSearch, DATA_ENTRY, TableC, PrimaryC } from '../../components';
import applicationModuleData from './config';
import moment from 'moment';
import UploadModalC from './uploadModal';
import { exportFile, getUserInfo } from '../../utils/commonFunc';

class FileUpload extends React.Component {
  constructor() {
    super();
    this.state = {
      columns: [],
      dataSource: [],
      current: 1,
      pageSize: 10,
      total: 0,
      isReset: false, // 是否点击重置
      queryData: {}, // 查询条件
      isVisible: false, // 模态框开关
      modalData: {}, // 模态框回填数据
      isDetails: false, // 是否详情点击
      isOnlyTest: undefined, // 仅仅有压力测试
    };
  }

  componentDidMount() {
    // 超级管理员展示两种模式，运营管理角色 展示一种压力测试
    const isOnlyTest = getUserInfo().isSuper == true ? false : getUserInfo().isOperationsManage;
    this.setState(
      {
        queryData: isOnlyTest ? { applicationModule: '1' } : {},
        isOnlyTest,
      },
      () => {
        this.getTableData();
      },
    );
  }

  // 查询
  onQuery = (query) => {
    query.startDate && (query.startDate = `${moment(query?.startDate).format('YYYY-MM-DD')} 00:00:00`);
    query.endDate && (query.endDate = `${moment(query?.endDate).format('YYYY-MM-DD')} 23:59:59`);
    this.setState(
      {
        isReset: false,
        current: 1,
        queryData: query,
      },
      () => {
        this.getTableData();
      },
    );
  };

  // 重置
  onClear = () => {
    this.setState({
      isReset: true,
      queryData: this.state.isOnlyTest ? { applicationModule: '1' } : {},
    });
  };

  // 获取表格数据
  getTableData = () => {
    const {
      fileUploadM: { columns },
    } = this.props;
    const { current, pageSize, queryData } = this.state;
    this.setState(
      {
        columns: undefined,
        dataSource: undefined,
      },
      () => {
        this.props.dispatch({
          type: 'fileUploadM/getFileData',
          payload: {
            ...queryData,
            current,
            pageSize,
          },
          callback: (data) => {
            const newColumns = this.changeColumns(columns);
            if (data) {
              this.setState({
                columns: newColumns,
                dataSource: data.dataSource,
                current: data.pageInfo?.currentPage,
                pageSize: data.pageInfo?.numInPage,
                total: data.pageInfo?.total,
              });
            } else {
              this.setState({
                columns: newColumns,
                dataSource: [],
                current: 1,
                pageSize: 10,
                total: 0,
              });
            }
          },
        });
      },
    );
  };

  // 改变columns的样式
  changeColumns = (columns) => {
    if (columns && columns.length) {
      columns.map((item) => {
        if (item.key == 'operate') {
          item.operates = [
            {
              title: '详情',
              onClick: (record, index) => {
                this.details(record);
              },
            },
            {
              title: '导出',
              onClick: (record, index) => {
                this.export(record);
              },
            },
          ];
        }
      });
    }
    return columns;
  };

  // 详情点击
  details = (record) => {
    this.setState({ isVisible: true, modalData: record, isDetails: true });
  };

  // 导出文件
  export = (record) => {
    exportFile('gateway/file/maat-admin/file/download', record.fileList, true);
  };

  // 上传
  upload = () => {
    this.setState({ isVisible: true });
  };

  // 响应上传确定
  uploadOk = () => {
    this.setState({ isVisible: false, isDetails: false });
    this.getTableData();
  };

  // 响应上传取消
  uploadCancel = () => {
    this.setState({ isVisible: false, isDetails: false });
  };

  // 表格页码排序改变调用
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    if (this.state.isReset) {
      // 判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      return;
    }
    this.setState({ current, pageSize }, () => {
      this.getTableData();
    });
  };

  render() {
    const { isOnlyTest, columns, dataSource, current, pageSize, isVisible, modalData, isDetails, total } = this.state;
    return (
      <ContentPackage
        title='文件上传'
        contentHtml={
          <div>
            <AdvancedSearch
              dataSource={[
                {
                  dataIndex: 'tenant',
                  type: DATA_ENTRY.TENANT,
                },
                {
                  dataIndex: 'applicationModule',
                  title: '应用模块',
                  type: DATA_ENTRY.SELECT,
                  allowClear: true,
                  dataSource: applicationModuleData,
                  initialValue: isOnlyTest ? '1' : undefined,
                  disabled: isOnlyTest,
                },
                {
                  dataIndex: ['startDate', 'endDate'],
                  title: '上传日期',
                  type: DATA_ENTRY.RANGEDATE,
                  allowClear: true,
                },
              ]}
              onQuery={this.onQuery}
              onClear={this.onClear}
            />
            <div style={{ marginTop: '10px' }}>
              <PrimaryC onClick={this.upload} title='上传' />
            </div>
            <div style={{ marginTop: '15px' }}>
              <TableC
                columns={columns}
                dataSource={dataSource}
                rowKey='id'
                selfScrollY={true}
                scroll={{ x: 'max-content' }}
                current={current}
                pageSize={pageSize}
                total={total}
                onChange={this.handleTableChange}
              />
            </div>
            <div>
              {isVisible && (
                <UploadModalC uploadOk={this.uploadOk} uploadCancel={this.uploadCancel} modalData={modalData} isDetails={isDetails} isVisible={isVisible} isOnlyTest={isOnlyTest} />
              )}
            </div>
          </div>
        }
      />
    );
  }
}
export default connect(({ fileUploadM }) => ({ fileUploadM }))(FileUpload);
